<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="header">
    <div class="header">
      <div class="header-nav">
        <div class="header-top-left">
          <h1>图书展示</h1>
        </div>
        <div class="header-top-right">
          <button class="header-top-right-button"><a href="add.html">添加</a></button>
        </div>
      </div>
      <div class="center-nav">
        <table>
          <tr class="table-th">
            <th>图书展示</th>
            <th>详细信息</th>
          </tr>
          <tr th:each="details,detailszt:${Detailslist}" class="table-td">
            <td class="imgone">
              <img src="/books/图片/logo图标.png">
            </td>
            <td>
              <div><span>名称：</span><span th:text="${details.getName()}"></span></div>
              <div><span>价格：</span><span th:text="${details.getPrice()}"></div>
            </td>
            <td>
              <button class="button-left"><a th:href="@{|/user/delete?id=${details.getId()}|}">删除</a></button>
              <button class="button-right"><a th:href="@{|/user/shoppingCart?id=${details.getId()}|}">购物车</a></button>
            </td>
          </tr>

        </table>
      </div>
      <div class="bottom-nav">
        <button th:if="${hasPrevious}" class="bottom-nav-left"><a th:href="@{|/user/index?pc=${pc-1}|}">上一页</a></button>
        <div class="bottom-nav-center"><span th:text="${pc}"></span>/<span th:text="${countpage}"></span></div>
        <button th:if="${hasNext}" class="bottom-nav-right"><a th:href="@{|/user/index?pc=${pc+1}|}">下一页</a></button>
      </div>
    </div>
  </div>
</body>
<style>
  *{
    padding: 0%;
    margin: 0%;
  }
  #header{
    width: 100%;
  }
  .header{
    width: 1200px;
    margin: 0 auto;
    background-color: #ccc;
    border: 1px solid black;
  }
  .header-top-left{
    float: left;
    width: 600px;
    height: 100px;
    padding: 50px 0px 50px 100px;
    line-height: 100px;
  }
  .header-nav{
    width: 100%;
    height: 150px;
  }
  .header-top-right{
    float: right;
    width: 300px;
    height: 100px;
    padding: 80px 100px 20px 0px;
    line-height: 100px;
  }
  .header-top-right-button{
    float: right;
    width: 100px;
    height: 50px;
    border-radius: 15px;
    color: white;
    background-color: royalblue;
    border: 0px solid white;
  }
  .center-nav{
    width: 1000px;
    height: calc( 100% - 0px);
    margin: 50px 100px;
    border: 1px solid red;
  }
  .table-th>th{
    width: 330px;
  }
  .table-td>td{
    height: 170px;
  }
  .imgone{
    padding: 20px 60px 0px 60px;
  }
  .table-td>td>div{
    margin-top: 20px;
  }
  .table-td>td>div>span{
    font-size: 24px;
  }
  .button-left{
    width: 100px;
    height: 50px;
    background-color: red;
    border: 0px solid white;
    border-radius: 15px;
    margin: 0px 30px;
  }
  .button-right{
    width: 100px;
    height: 50px;
    background-color: white;
    border: 0px solid white;
    border-radius: 15px;
    margin: 0px 30px;
  }
  .bottom-nav{
    height: 60px;
    width: 1000px;
    margin: 50px 100px;
  }
  .bottom-nav-left{
    float: left;
    width: 50px;
    height: 25px;
  }
  .bottom-nav-center{
    float: left;
    width: 900px;
    text-align: center;

  }
  .bottom-nav-right{
    float: right;
    width: 50px;
    height: 25px;
  }
</style>
</html>